<template>
  <!-- 第一层 -->
  <div class="dashboard-container">
    <el-card class="titlexiao">
      <h1>基于百度飞桨的后台管理系统</h1>
      <span>{{ version }}</span>
      <span>{{ Technical }}</span>
      <el-button icon="el-icon-cloudy" size="mini" type="success" plain
        >访问码云</el-button
      >
      <el-button icon="el-icon-data-board" size="mini" plain @click="tozhuye"
        >访问主页</el-button
      >
    </el-card>
    <!-- 第二层 -->
    <el-row >
      <el-col :span="6">
        <el-card class="box-card-echarts">
          <timeline></timeline>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card class="box-card-echarts">
          <lineChart></lineChart>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="box-card-echarts">
          <pie></pie>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三层 -->
    <!-- <el-row>
      <el-col :span="9">
        <el-card class="box-card-my" style="border-radius: 12px">
          <myself></myself>
        </el-card>
      </el-col>
      <el-col :span="7" :offset="1">
        <el-card class="box-card-my" style="border-radius: 12px">
          <div class="weather">
       <weather></weather>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="box-card">
          <notice></notice>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import timeline from "@/components/echarts/timeline.vue";
import pie from "@/components/echarts/pie.vue";
import lineChart from "@/components/echarts/lineChart.vue";
import myself from "@/components/echarts/myself.vue";
import Notice from "@/components/echarts/Notice.vue";
import weather from "@/components/echarts/weather.vue";
export default {
  components: { timeline, pie, myself, lineChart, Notice ,weather},
  name: "Dashboard",
  data() {
    return {
      Technical:
        "技术选型：飞桨（PaddlePaddle）以百度多年的深度学习技术研究和业务应用为基础，集深度学习核心训练和推理框架、基础模型库、端到端开发套件、丰富的工具组件于一体，是中国首个自主研发、功能完备、开源开放的产业级深度学习平台。",
      version: "当前版本：v2.1.2",
    };
  },
  methods:{
    tozhuye(){
      window.location.href = 'http://x121318.gitee.io/plt_official/';
    }
  }
};
</script>

<style lang="scss" scoped>

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.hetttt {
  height: 200px;
}
.el-card {
  border-radius: 12px;
}
.box-card-echarts {
  height: 400px;
}
.box-card-my {
  height: 350px;
}
.titlexiao {
  color: gray;
  font-size: 14px;
}

.titlexiao h1 {
  font-weight: 500;
}
.titlexiao span {
  display: block; /* 独占一行 */
  margin-bottom: 15px;
}
.weather {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.time {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  color: #fff;
}
</style>
